<template>
    <!-- <div style="color: aliceblue;">等待更新...</div> -->
    <div class="sw-page">

        <div>
            <div class="fault-title"> 故障列表 <span class="more">more</span> </div>
            <div class="fault-content">
                <fault-tag v-for="item in faultList" :row="item" :key="item.maintenanceId"
                    @change="faultChange"></fault-tag>
            </div>
        </div>

        <div>
            <div class="fault-statistics"> 
                <span>维护统计</span> 
                <!-- <span class="more" @click="select">查询</span>  -->
                <span class="more" @click="addClick">新建维护</span></div>
            <el-table :data="tableData" style="width: 100%;overflow: auto;" class="zt-table">
                <el-table-column type="index" width="50"> </el-table-column>
                <el-table-column show-overflow-tooltip label="台站名称" align="center" prop="regionalNodeName" />
                <el-table-column show-overflow-tooltip label="机房维护次数" align="center" prop="roomNumer" />
                <el-table-column show-overflow-tooltip label="电台维护次数" align="center" prop="radioNumber" />
                <el-table-column show-overflow-tooltip label="天线维护次数" align="center" prop="antennaNumber" />
                <el-table-column show-overflow-tooltip label="摄像头维护次数" align="center" prop="cameraNumber" />
                <el-table-column show-overflow-tooltip label="传感器维护次数" align="center" prop="sensorNumber" />
                <el-table-column show-overflow-tooltip label="sdr维护次数" align="center" prop="sdrNumber" />
                <el-table-column show-overflow-tooltip label="负责人" align="center" prop="contacts" />
                <el-table-column show-overflow-tooltip label="故障数量" align="center" prop="faultNumber">
                    <template slot-scope="{row}">
                        <div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; line-height: 43px;"
                            :style="{ backgroundColor: row.faultNumber > 0 ? '#D95348' : '' }">
                            {{ row.faultNumber }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="最近维护时间" align="center" prop="lastTime" />
                <el-table-column label="操作" width="60" align="right">
                    <template slot-scope="{row}" style="border: none;">
                        <img class="icon-img" src="@/assets/images/preview.png" title="预览" @click="previewClick(row)" />
                    </template>
                </el-table-column>
                <el-table-column type="expand" width="40" align="left">
                    <template slot-scope="props" style="border: none;">
                        <fault-table :regionalNodeId="props.row.regionalNodeId"></fault-table>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增 -->
        <right-dialog title="添加维护记录" :visible="open" @closeDialog="cancel">
            <template v-slot:default>
                <edit-fault v-if="open" @close="cancel" @change="dialChange"></edit-fault>
            </template>
        </right-dialog>

        <!-- 新增资料 -->
        <right-dialog title="台站相关资料" :visible="openPreview" @closeDialog="cancelPreview">
            <template v-slot:default>
                <preview-page v-if="openPreview" :previewObj="previewObj" @close="cancelPreview"></preview-page>
            </template>
        </right-dialog>
    </div>
</template>

<script>
import faultTag from './components/faultTag.vue'
import faultTable from './components/faultTable.vue'
import editFault from './components/editFault.vue'
import previewPage from './components/previewPage.vue'
import RightDialog from "@/components/TZ/RightDialog"
import Api from "@/api/business/fault";

export default {
    components: { faultTag, faultTable, editFault, RightDialog, previewPage },
    data() {
        return {
            // 维护统计
            tableData: [],
            // 故障列表
            faultList: [],
            // 打开新建或者编辑窗口
            open: false,
            // 打开资料预览窗口
            openPreview: false,
            // 预览台站对象
            previewObj: null,
        }
    },
    mounted() {
        this.select();
    },
    methods: {
        select() {
            this.faultList = [];
            this.faultChange();
            this.initList();
        },
        initList() {
            // 维护统计
            Api.getFaultStatistics().then(rs => {
                this.fomartTable(rs.rows)
            })
        },
        // 打开新建窗口
        addClick() {
            this.open = true;
        },
        // 关闭窗口
        cancel() {
            this.open = false;
        },
        // 保存成功回调
        dialChange() {
            this.open = false;
            this.initList();
        },
        // 报警更新
        faultChange() {
            // 故障列表
            Api.getAlarmList().then(rs => {
                this.faultList = rs.rows
            })
        },
        // 打开预览窗口
        previewClick(row) {
            this.openPreview = true;
            this.previewObj = row;
        },
        // 关闭预览窗口
        cancelPreview() {
            this.openPreview = false;
            this.previewObj = null;
        },
        // 格式化维护统计
        fomartTable(list) {
            list = list.map(item => {
                let statistics = item.pltMaintenanceStatistics
                if (statistics && statistics.length > 0) {
                    let itemPar = {
                        roomNumer: 0, // 机房数
                        radioNumber: 0, // 电台数
                        antennaNumber: 0, // 天线数
                        cameraNumber: 0, // 摄像头数
                        sensorNumber: 0, // 传感器数
                        sdrNumber: 0, // sdr维护次数
                        faultNumber: 0, // 故障数量
                    };
                    let time = [] // 时间数组
                    for (let i = 0; i < statistics.length; i++) {
                        // deviceType :设备类型 （1-台站 2-机房 3-电台 4-天线 5-sdr 6-传感器 7-摄像头）
                        const device = statistics[i];
                        if (device.deviceType == "2") itemPar.roomNumer += 1;
                        if (device.deviceType == "3") itemPar.radioNumber += 1;
                        if (device.deviceType == "4") itemPar.antennaNumber += 1;
                        if (device.deviceType == "5") itemPar.sdrNumber += 1;
                        if (device.deviceType == "6") itemPar.sensorNumber += 1;
                        if (device.deviceType == "7") itemPar.cameraNumber += 1;
                        if (device.status == "0") itemPar.faultNumber += 1;
                        time.push(device.lastMaintenanceTime)
                    }
                    const min = time.reduce((prev, cur) => (prev < cur ? prev : cur));;
                    item = { ...item, ...itemPar, lastTime: min }
                }
                return item;
            })
            this.tableData = list;
        }
    }
}
</script>

<style lang="scss" scoped>
.el-table {
    ::v-deep.el-table__expand-icon {
        color: #fff;
    }

    ::v-deep.el-icon {
        top: 4px
    }
}

.sw-page {
    padding: 20px;
    height: 100%;
    font-family: Source Han Sans, Source Han Sans;
    font-style: normal;
    text-transform: none;
    background-color: #1E273D;
}

.el-table ::v-deep tr {
    background-color: #1E273D
}

.el-table ::v-deep.el-table__expanded-cell {
    background-color: #1E273D !important;
}

.el-table ::v-deep.el-table__expanded-cell:hover {
    background-color: #1E273D !important;
}

.fault-title {
    background-image: url('../../../../public/image/i.png');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 30px;
    background-position-y: 2px;
    color: #D95348;
    display: inline-flex;
}

.fault-statistics {
    margin-top: 20px;
    margin-bottom: 10px;
    background-image: url('../../../../public/image/i.png');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding-left: 30px;
    background-position-y: 2px;
    color: #2CA6E0;
    display: flex;
    justify-content: space-between;
}

.more {
    border: 1px solid rgb(217, 83, 72);
    border-radius: 7px;
    padding: 0px 10px;
    line-height: 20px;
    font-size: 18px;
    margin-left: 20px;
    color: #D95348;
}

.fault-content {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}
</style>